<template>
  <div class="main">
    <!-- 导航 -->
    <div class="nav">
      <van-tabbar v-model="active">
        <van-tabbar-item v-for="(item,index) in tabIconData" :key="index" :icon="active==index?item.activeIcon:item.inactiveIcon" :to='item.to' @click="clicktab">{{item.name}}</van-tabbar-item>
      </van-tabbar>
    </div>
    
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabIconData:[
        {
          name:'首页',
          activeIcon:require('../assets/images/home_active.png'),
          inactiveIcon:require('../assets/images/home.png'),
          // 跳转路由
          to:{name:'Home'}
        },
         {
          name:'菜单',
          activeIcon:require('../assets/images/menu_active.png'),
          inactiveIcon:require('../assets/images/menu.png'),
           to:{name:'Menu'}
        },
         {
          name:'购物袋',
          activeIcon:require('../assets/images/shopbag_active.png'),
          inactiveIcon:require('../assets/images/shopbag.png'),
           to:{name:'Shopbag'}
        },
         {
          name:'我的',
          activeIcon:require('../assets/images/my_active.png'),
          inactiveIcon:require('../assets/images/my.png'),
           to:{name:'My'}
        }
      ],
    }
  },
  created() {
    // 防止刷新后active每次都变成0
    console.log('this.$router.name',this.$route.name);
      if(this.$route.name=='Menu'){
        this.active=1
      }else if(this.$route.name=='Login' || this.$route.name=='Register' ||this.$route.name=='My'){
        this.active=3
      }else if(this.$route.name=='Shopbag' ){
         this.active=2
      }
    
    },
    updated() {
        // 点击 back 返回按钮时，页面没有created阶段
      if(this.$route.name=='Menu'){
        this.active=1
      }else if(this.$route.name=='Login' || this.$route.name=='Register' ||this.$route.name=='My'){
        this.active=3
      }else if(this.$route.name=='Shopbag' ){
         this.active=2
      }else if(this.$route.name=='Home' ){
         this.active=0
      }
    },
  methods: {
      clicktab(){
         console.log('active=>',this.active);
      }
  },
}
</script>
